<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="renderer" content="webkit"/>
  <meta name="force-rendering" content="webkit"/>
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>
  <title>地域分部</title>
  <!-- Tell the browser to be responsive to screen width -->
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">

  <link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="/bower_components/font-awesome/css/font-awesome.min.css">
  <link rel="stylesheet" href="/bower_components/Ionicons/css/ionicons.min.css">
  <link rel="stylesheet" href="/bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css">
  <link rel="stylesheet" href="/dist/css/AdminLTE.min.css">
  <link rel="stylesheet" href="/dist/css/skins/_all-skins.min.css">

  <link rel="stylesheet" href="/dist/js/datepicker/css/datepicker.css">

  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->

  <!-- Google Font -->
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">

  <!--头部-->
  <header id="headerDiv" class="main-header">
    <!--#include  file="/pages/admin/header.html"-->
  </header>

  <!--左侧边栏 -->
  <aside id="sidebarDiv" class="main-sidebar">
    <!--#include  file="/pages/admin/sidebar.html"-->
  </aside>

  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <h1>
        <small>地域分部</small>
      </h1>
      <ol class="breadcrumb">
        <li><a href="javascript:void(0);"><i class="fa fa-dashboard"></i> 流量分析</a></li>
        <li><a href="javascript:void(0);">地域分部</a></li>
      </ol>
    </section>



    <!-- Main content -->
    <section class="content">
      <div class="row">
        <div class="col-xs-12">
          <div class="box">
            <div class="box-header">
              <span style="color: #999;">默认加载今天数据</span>

              <form role="form" class="form-inline pull-right">
                <label class="control-label">搜索:</label>

                <div class="form-group">
                  <div class="c-datepicker-date-editor J-datepicker-range-day mt10">
                    <i class="c-datepicker-range__icon kxiconfont icon-clock"></i>
                    <input id="startDate" placeholder="开始日期" name="" class="c-datepicker-data-input only-date" value="">
                    <span class="c-datepicker-range-separator">~</span>
                    <input id="endDate" placeholder="结束日期" name="" class="c-datepicker-data-input only-date" value="">
                  </div>
                </div>


                <div class="form-group">
                  <select id="searchKey" class="form-control m-b">
                    <option value="uid">渠道id</option>
                  </select>
                </div>
                <div class="form-group">
                  <div class="input-group">
                    <input id="searchValue" type="text" class="form-control">
                    <span class="input-group-btn">
                        <button type="button" class="btn btn-primary" onclick="search();"><i class="fa fa-search"></i></button>
                    </span>
                  </div>
                </div>
              </form>
            </div>


          </div>
          <!-- /.box -->





        </div>

        <div  class="col-xs-6">
          <!--地图-->
          <div id="chart1" style="min-height: 300px"></div>
        </div>
        <div class="col-xs-6">
          <!--饼图-->
          <div id="chart2" style="min-height: 300px"></div>
        </div>

        <div class="col-xs-12">
          <div class="box-body table-responsive">
            <table id="datatable"  class="table table-hover table-striped ">
              <thead>
              <tr>
                <th style=" white-space:nowrap">日期</th>
                <th style=" white-space:nowrap">省份</th>
                <th style=" white-space:nowrap">城市</th>
                <th style=" white-space:nowrap">次数</th>

              </tr>
              </thead>
              <tbody>
              </tbody>
            </table>
          </div>

        </div>


      </div>




    </section>
    <!-- /.content -->

  </div>


  <!-- Control Sidebar -->
  <!-- /.control-sidebar -->
  <!-- Add the sidebar's background. This div must be placed
       immediately after the control sidebar -->
  <div class="control-sidebar-bg"></div>
</div>
<!-- ./wrapper -->
<script src="/bower_components/jquery/dist/jquery.min.js"></script>
<script src="/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="/bower_components/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
<script src="/bower_components/jquery-slimscroll/jquery.slimscroll.min.js"></script>
<script src="/bower_components/fastclick/lib/fastclick.js"></script>
<script src="/dist/js/adminlte.min.js"></script>
<script src="/dist/js/store.min.js"></script>
<script src="/dist/js/layer/layer.js"></script>
<script src="/dist/js/laydate/laydate.js"></script>
<script src="/dist/js/datepicker/js/plugins/moment.min.js"></script>
<script src="/dist/js/datepicker/js/datepicker.all.js"></script>
<script src="/dist/js/echarts.min.js"></script>
<script src="/dist/js/china.js"></script>


<script>
    $(function () {
        initChart1();
        initChart2();


        var DATAPICKERAPI = {

            shortcutMonth: function () {
                // 当月
                var nowDay = moment().get('date');
                var prevMonthFirstDay = moment().subtract(1, 'months').set({ 'date': 1 });
                var prevMonthDay = moment().diff(prevMonthFirstDay, 'days');
                return {
                    now: '-' + nowDay + ',0',
                    prev: '-' + prevMonthDay + ',-' + nowDay
                }
            },

            // 快捷选项option
            rangeShortcutOption1: [
                {
                    name: '今天',
                    day: '0,0'
                },
                {
                    name: '昨天',
                    day: '-1,-1'
                },
                {
                name: '近7天',
                day: '-8,-1'
            }, {
                name: '最近30天',
                day: '-31,-1'
            }]

        };
        //年月日范围
        $('.J-datepicker-range-day').datePicker({
            hasShortcut: true,
            format: 'YYYY-MM-DD',
            isRange: true,
            shortcutOptions: DATAPICKERAPI.rangeShortcutOption1
        });


        datatable = $("#datatable").DataTable({
            'aLengthMenu' : [100],
            'scrollCollapse' : true,//
            'stateSave' : false,//保存配置状态
            'processing' : false, // 显示loading
            'paging' : true,
            'lengthChange' : false,
            'searching' : false,// 取消搜索框
            'ordering' : false,// 取消字段排序
            'info' : true,
            'autoWidth' : false,
            'deferRender': true,
            'serverSide' : true, // ajax请求时必须写本项
            // 'pagingType' : 'full_numbers',
            'ajax' : { // ajax请求
                'type' : "POST",
                'url' : "/lmgame/data/areaTablePage",
                'data' : function ( d ) {
                    d.searchKey = $("#searchKey").val();
                    d.searchValue = $("#searchValue").val();
                    d.startDate = $("#startDate").val();
                    d.endDate = $("#endDate").val();
                    return d;
                },
                "error": function(xhr, ts, et) { //XMLHttpRequest, textStatus, errorThrown
                    if(xhr.status === 400){
                        window.location.href = "/pages/admin/login.html";
                    }
                    if(xhr.status === 403){
                        window.location.href = "/403.html";
                    }
                }
            },
            'columns' : [ // data数据绑定对应列
                {"data" : "day"},
                {"data" : "region"},
                {"data" : "city"},
                {"data" : "num"}
            ],
            "columnDefs" : [
            ],
            'language' : {
                'lengthMenu' : "显示 _MENU_ 项结果", // 每页显示多少条
                'zeroRecords' : "暂无数据", // 没有记录时显示的内容
                'info' : "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项", // 当前页信息
                'infoEmpty' : "显示第 0 至 0 项结果，共 0 项", // 当前页信息-没有记录时
                'paginate' : {
                    'previous' : " << ",
                    'next' : " >> "
                }
            }
        });


    });

    function search() {
        let startDate=$("#startDate").val();
        let endDate=$("#endDate").val();
        let searchKey = $("#searchKey").val();
        let searchValue = $("#searchValue").val();
        initChart1(startDate,endDate,searchKey,searchValue);//地图
        initChart2(startDate,endDate,searchKey,searchValue);//饼图

        datatable.ajax.reload(false);
    }

    //地图
    function initChart1(startDate,endDate,searchKey,searchValue) {
        let chart1 = echarts.init(document.getElementById('chart1'),'light');
        chart1.showLoading({color:'#409eff'});
        let values=[];
        let maxValue=100;
        let minValue=0;
        // let values1=[{name: '北京',value: 100 },{name: '天津',value: 200 },
        //         {name: '上海',value: 300 },{name: '重庆',value: 4000 },
        //         {name: '河北',value: 200 },{name: '河南',value: 600 },
        //         {name: '云南',value: 2000},{name: '辽宁',value: 20 },
        //         {name: '黑龙江',value: 20},{name: '湖南',value: 200 },
        //         {name: '安徽',value: 2000 },{name: '山东',value: 2000 },
        //         {name: '新疆',value: 7000 },{name: '江苏',value: 9000 },
        //         {name: '浙江',value: 6000 },{name: '江西',value: 20000 },
        //         {name: '湖北',value: 2000 },{name: '广西',value: 2000 },
        //         {name: '甘肃',value: 2000 },{name: '山西',value: 20000 },
        //         {name: '内蒙古',value: 2000 },{name: '陕西',value: 20000 },
        //         {name: '吉林',value: 20000 },{name: '福建',value: 20000 },
        //         {name: '贵州',value: 200 },{name: '广东',value: 20000 },
        //         {name: '青海',value: 2000 },{name: '西藏',value: 2000 },
        //         {name: '四川',value: 800 },{name: '宁夏',value: 200 },
        //         {name: '海南',value: 400 },{name: '台湾',value: 2000 },
        //         {name: '香港',value: 70 },{name: '澳门',value: 2100 }];
        //后台请求 数据
        let url="/lmgame/data/pieData";
         $.ajax({
             type : 'POST',
             data:{'type':5,'startDate':startDate,'endDate':endDate,'searchKey':searchKey,'searchValue':searchValue},
             url : url,
             dataType : "json",
             success : function(data) {
                 if (data.code == '0') {
                     /*let list = data.data;
                     for(let i=0;i<list.length;i++){
                         values.push({"value":list[i].num,"name":list[i].names});
                     }*/
                     $.each(data.data, function(k, v) {       //遍历返回的JSON数据
                         if(k===0){
                             maxValue=v.num;
                         }
                         let len =data.data.length;
                         if (k === len - 1)
                         {
                             minValue=v.num;
                         }
                         values.push({
                             name : v.names,
                             value : v.num
                         });
                     });
                     chart1.hideLoading(); //隐藏加载动画
                     let option = {
                         title: {
                             x:'left'
                         },
                         tooltip : {
                             trigger: 'item'
                         },
                         visualMap: {
                             show : false,
                             min: minValue,
                             max: maxValue,
                             inRange: {
                                 color: ['lightskyblue', 'yellow','orangered']
                             }
                         },
                         series: [{
                             name: '访问次数',
                             type: 'map',
                             mapType: 'china',
                             roam: true,
                             label: {
                                 normal: {
                                     show: false
                                 },
                                 emphasis: {
                                     show: false
                                 }
                             },
                             data:values
                         }]

                     };
                     chart1.setOption(option);
                 }else{
                     layer.msg("数据返回失败!");
                     chart1.hideLoading();
                 }
             },
             error : function(errorMsg) {
                 //请求失败时执行该函数
                 chart1.hideLoading();
             }
         });
    }

  //饼图
    function initChart2(startDate,endDate,searchKey,searchValue) {
        let chart2 = echarts.init(document.getElementById('chart2'),'light');
        chart2.showLoading({color:'#409eff'});
        let values=[];
        //后台请求 数据
        let url="/lmgame/data/pieData";
        $.ajax({
            type : 'POST',
            data:{'type':5,'startDate':startDate,'endDate':endDate,'searchKey':searchKey,'searchValue':searchValue},
            url : url,
            dataType : "json",
            success : function(data) {
                if (data.code == '0') {
                    /*let list = data.data;
                    for(let i=0;i<list.length;i++){
                        values.push({"value":list[i].num,"name":list[i].names});
                    }*/
                    $.each(data.data, function(k, v) {       //遍历返回的JSON数据
                        values.push({
                            name : v.names,
                            value : v.num
                        });
                    });
                    chart2.hideLoading(); //隐藏加载动画
                    let option = {
                        title : {
                            textStyle: {
                                fontWeight: 'normal',
                                color: '#666'          // 主标题文字颜色
                            },
                            left: 'center'
                        },
                        tooltip : {
                            trigger: 'item',
                            formatter: "{a} <br/>{b} : {c} ({d}%)"
                        },
                        series : [
                            {
                                name: '区域',
                                type: 'pie',
                                radius : '55%',
                                center: ['60%', '50%'],
                                data: values,
                                itemStyle: {
                                    emphasis: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]
                    };
                    chart2.setOption(option);
                }else{
                    layer.msg("数据返回失败!");
                    chart2.hideLoading();
                }
            },
            error : function(errorMsg) {
                //请求失败时执行该函数
                chart2.hideLoading();
            }
        });
    }

</script>

</body>
</html>
